<template>
  <view class="progress-tracker">
    <!-- 总体进度 -->
    <view class="overall-progress bg-white radius padding margin-bottom">
      <view class="flex justify-between align-center margin-bottom-sm">
        <text class="text-lg text-bold">总体进度</text>
        <text class="text-lg text-bold" :class="getProgressColor(overallProgress)">
          {{ overallProgress }}%
        </text>
      </view>
      
      <view class="progress-bar margin-bottom">
        <view 
          class="progress-fill" 
          :class="getProgressColor(overallProgress)"
          :style="{ width: overallProgress + '%' }"
        ></view>
      </view>
      
      <view class="progress-stats flex justify-between">
        <view class="stat-item text-center">
          <text class="text-xl text-bold text-blue">{{ stats.totalTasks }}</text>
          <text class="text-xs text-gray">总任务</text>
        </view>
        <view class="stat-item text-center">
          <text class="text-xl text-bold text-orange">{{ stats.pendingTasks }}</text>
          <text class="text-xs text-gray">待处理</text>
        </view>
        <view class="stat-item text-center">
          <text class="text-xl text-bold text-green">{{ stats.completedTasks }}</text>
          <text class="text-xs text-gray">已完成</text>
        </view>
        <view class="stat-item text-center">
          <text class="text-xl text-bold text-red">{{ stats.delayedTasks }}</text>
          <text class="text-xs text-gray">延期</text>
        </view>
      </view>
    </view>

    <!-- 工种进度 -->
    <view class="worktype-progress bg-white radius padding margin-bottom" v-if="worktypeProgress.length > 0">
      <view class="flex justify-between align-center margin-bottom">
        <text class="text-lg text-bold">工种进度</text>
        <text class="text-sm text-blue" @tap="toggleWorktypeView">
          {{ showWorktypeDetail ? '收起' : '展开' }}
        </text>
      </view>
      
      <view v-if="showWorktypeDetail">
        <view 
          v-for="(worktype, index) in worktypeProgress" 
          :key="worktype.id"
          class="worktype-item margin-bottom"
          :class="{ 'border-bottom': index < worktypeProgress.length - 1 }"
        >
          <view class="flex justify-between align-center margin-bottom-xs">
            <text class="text-bold">{{ worktype.name }}</text>
            <text class="text-sm" :class="getProgressColor(worktype.progress)">
              {{ worktype.progress }}%
            </text>
          </view>
          
          <view class="mini-progress-bar margin-bottom-xs">
            <view 
              class="mini-progress-fill" 
              :class="getProgressColor(worktype.progress)"
              :style="{ width: worktype.progress + '%' }"
            ></view>
          </view>
          
          <view class="flex justify-between text-xs text-gray">
            <text>{{ worktype.completedTasks }}/{{ worktype.totalTasks }} 任务</text>
            <text>{{ worktype.assignedEmployees }} 人参与</text>
          </view>
        </view>
      </view>
      
      <view v-else class="worktype-summary">
        <view class="flex justify-between">
          <view 
            v-for="worktype in worktypeProgress.slice(0, 3)" 
            :key="worktype.id"
            class="summary-item text-center"
          >
            <view class="mini-circle" :class="getProgressColor(worktype.progress)">
              <text class="text-xs text-white">{{ worktype.progress }}%</text>
            </view>
            <text class="text-xs text-gray margin-top-xs">{{ worktype.name }}</text>
          </view>
          <view v-if="worktypeProgress.length > 3" class="summary-item text-center">
            <view class="mini-circle bg-gray">
              <text class="text-xs text-white">+{{ worktypeProgress.length - 3 }}</text>
            </view>
            <text class="text-xs text-gray margin-top-xs">更多</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 时间线进度 -->
    <view class="timeline-progress bg-white radius padding" v-if="timelineData.length > 0">
      <view class="flex justify-between align-center margin-bottom">
        <text class="text-lg text-bold">进度时间线</text>
        <text class="text-sm text-blue" @tap="refreshTimeline">刷新</text>
      </view>
      
      <view class="timeline">
        <view 
          v-for="(item, index) in timelineData" 
          :key="index"
          class="timeline-item"
          :class="{ 'last-item': index === timelineData.length - 1 }"
        >
          <view class="timeline-dot" :class="item.statusClass"></view>
          <view class="timeline-content">
            <view class="flex justify-between align-center">
              <text class="text-bold">{{ item.title }}</text>
              <text class="text-xs text-gray">{{ formatTime(item.time) }}</text>
            </view>
            <text class="text-sm text-gray margin-top-xs">{{ item.description }}</text>
            <view v-if="item.progress !== undefined" class="timeline-progress margin-top-xs">
              <view class="mini-progress-bar">
                <view 
                  class="mini-progress-fill" 
                  :class="getProgressColor(item.progress)"
                  :style="{ width: item.progress + '%' }"
                ></view>
              </view>
              <text class="text-xs margin-top-xs" :class="getProgressColor(item.progress)">
                {{ item.progress }}%
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProgressTracker',
  props: {
    planId: {
      type: String,
      required: true
    },
    autoRefresh: {
      type: Boolean,
      default: false
    },
    refreshInterval: {
      type: Number,
      default: 30000 // 30秒
    }
  },
  
  data() {
    return {
      overallProgress: 0,
      stats: {
        totalTasks: 0,
        pendingTasks: 0,
        completedTasks: 0,
        delayedTasks: 0
      },
      worktypeProgress: [],
      timelineData: [],
      showWorktypeDetail: false,
      refreshTimer: null
    }
  },
  
  mounted() {
    this.loadProgressData()
    if (this.autoRefresh) {
      this.startAutoRefresh()
    }
  },
  
  beforeDestroy() {
    this.stopAutoRefresh()
  },
  
  methods: {
    // 加载进度数据
    async loadProgressData() {
      try {
        // 这里应该调用实际的进度API
        // const response = await productionPlan.getProgress(this.planId)
        
        // 模拟数据
        this.overallProgress = 65
        this.stats = {
          totalTasks: 12,
          pendingTasks: 3,
          completedTasks: 8,
          delayedTasks: 1
        }
        
        this.worktypeProgress = [
          {
            id: '1',
            name: '切割',
            progress: 80,
            totalTasks: 4,
            completedTasks: 3,
            assignedEmployees: 2
          },
          {
            id: '2',
            name: '组装',
            progress: 60,
            totalTasks: 5,
            completedTasks: 3,
            assignedEmployees: 3
          },
          {
            id: '3',
            name: '打包',
            progress: 33,
            totalTasks: 3,
            completedTasks: 1,
            assignedEmployees: 1
          }
        ]
        
        this.timelineData = [
          {
            title: '计划启动',
            description: '生产计划正式启动',
            time: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
            statusClass: 'bg-green',
            progress: 0
          },
          {
            title: '切割工序开始',
            description: '张三开始执行切割任务',
            time: new Date(Date.now() - 1.5 * 60 * 60 * 1000).toISOString(),
            statusClass: 'bg-blue',
            progress: 25
          },
          {
            title: '组装工序开始',
            description: '李四、王五开始执行组装任务',
            time: new Date(Date.now() - 1 * 60 * 60 * 1000).toISOString(),
            statusClass: 'bg-blue',
            progress: 45
          },
          {
            title: '当前进度',
            description: '多个工序并行进行中',
            time: new Date().toISOString(),
            statusClass: 'bg-orange',
            progress: 65
          }
        ]
        
        this.$emit('progress-updated', {
          progress: this.overallProgress,
          stats: this.stats
        })
        
      } catch (error) {
        console.error('加载进度数据失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },
    
    // 获取进度颜色
    getProgressColor(progress) {
      if (progress >= 100) return 'text-green'
      if (progress >= 80) return 'text-blue'
      if (progress >= 50) return 'text-orange'
      return 'text-red'
    },
    
    // 格式化时间
    formatTime(timeStr) {
      const date = new Date(timeStr)
      const now = new Date()
      const diff = now - date
      
      if (diff < 60 * 1000) {
        return '刚刚'
      } else if (diff < 60 * 60 * 1000) {
        return `${Math.floor(diff / (60 * 1000))}分钟前`
      } else if (diff < 24 * 60 * 60 * 1000) {
        return `${Math.floor(diff / (60 * 60 * 1000))}小时前`
      } else {
        return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
      }
    },
    
    // 切换工种详情显示
    toggleWorktypeView() {
      this.showWorktypeDetail = !this.showWorktypeDetail
    },
    
    // 刷新时间线
    refreshTimeline() {
      this.loadProgressData()
      uni.showToast({
        title: '已刷新',
        icon: 'success',
        duration: 1000
      })
    },
    
    // 开始自动刷新
    startAutoRefresh() {
      this.refreshTimer = setInterval(() => {
        this.loadProgressData()
      }, this.refreshInterval)
    },
    
    // 停止自动刷新
    stopAutoRefresh() {
      if (this.refreshTimer) {
        clearInterval(this.refreshTimer)
        this.refreshTimer = null
      }
    }
  }
}
</script>

<style scoped>
.progress-tracker {
  width: 100%;
}

.progress-bar {
  height: 12rpx;
  background-color: #f0f0f0;
  border-radius: 6rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 6rpx;
  transition: width 0.3s ease;
}

.progress-fill.text-green {
  background-color: #34c759;
}

.progress-fill.text-blue {
  background-color: #007aff;
}

.progress-fill.text-orange {
  background-color: #ff9500;
}

.progress-fill.text-red {
  background-color: #ff3b30;
}

.progress-stats {
  margin-top: 20rpx;
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-item text:first-child {
  display: block;
}

.stat-item text:last-child {
  display: block;
  margin-top: 8rpx;
}

.worktype-item {
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
}

.worktype-item.border-bottom {
  border-bottom: 1px solid #f0f0f0;
}

.mini-progress-bar {
  height: 6rpx;
  background-color: #f0f0f0;
  border-radius: 3rpx;
  overflow: hidden;
}

.mini-progress-fill {
  height: 100%;
  border-radius: 3rpx;
  transition: width 0.3s ease;
}

.mini-progress-fill.text-green {
  background-color: #34c759;
}

.mini-progress-fill.text-blue {
  background-color: #007aff;
}

.mini-progress-fill.text-orange {
  background-color: #ff9500;
}

.mini-progress-fill.text-red {
  background-color: #ff3b30;
}

.worktype-summary {
  padding: 20rpx 0;
}

.summary-item {
  flex: 1;
}

.mini-circle {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8rpx;
}

.mini-circle.text-green {
  background-color: #34c759;
}

.mini-circle.text-blue {
  background-color: #007aff;
}

.mini-circle.text-orange {
  background-color: #ff9500;
}

.mini-circle.text-red {
  background-color: #ff3b30;
}

.timeline {
  position: relative;
}

.timeline-item {
  position: relative;
  padding-left: 60rpx;
  padding-bottom: 40rpx;
}

.timeline-item.last-item {
  padding-bottom: 0;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 20rpx;
  top: 40rpx;
  bottom: -20rpx;
  width: 2rpx;
  background-color: #e0e0e0;
}

.timeline-item.last-item::before {
  display: none;
}

.timeline-dot {
  position: absolute;
  left: 10rpx;
  top: 10rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  z-index: 1;
}

.timeline-dot.bg-green {
  background-color: #34c759;
}

.timeline-dot.bg-blue {
  background-color: #007aff;
}

.timeline-dot.bg-orange {
  background-color: #ff9500;
}

.timeline-dot.bg-red {
  background-color: #ff3b30;
}

.timeline-content {
  background-color: #fafafa;
  border-radius: 8rpx;
  padding: 20rpx;
}

.timeline-progress {
  margin-top: 16rpx;
}
</style>
